<template>
  <div>
    <el-form
      label-width="120px"
      ref = 'dialogLeftTop1_3_data'
      :inline="true"
      :rules="appointmentConfirmConst.baseInfo_rules"
      :model="dialogLeftTop1_3_data">
      <el-form-item label="病人姓名" prop="patient.patientName">
        <el-input v-model="dialogLeftTop1_3_data.patient.patientName" auto-complete="off"
                  placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="patient.phone">
        <el-input v-model="dialogLeftTop1_3_data.patient.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="patient.idCard">
        <el-input v-model="dialogLeftTop1_3_data.patient.idCard" auto-complete="off" placeholder="请输入身份证"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="patient.sex">
        <dict-select v-model="dialogLeftTop1_3_data.patient.sex" placeholder="请选择性别" style='width: 196px'
                     dict-code="xb">
        </dict-select>
      </el-form-item>
      <el-form-item label="年龄" prop="patient.age">
        <el-input v-model="dialogLeftTop1_3_data.patient.age" auto-complete="off" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="patient.birthday">
        <el-date-picker type="date" placeholder="选择日期" v-model="dialogLeftTop1_3_data.patient.birthday"
                        style='width: 196px;' value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item label="婚姻" prop="patient.marry">
        <dict-select v-model="dialogLeftTop1_3_data.patient.marry" placeholder="请选择婚姻状况" style='width: 196px'
                     dict-code="hy">
        </dict-select>
      </el-form-item>
      <el-form-item label="文化程度" prop="patient.educationalLevel">
        <dict-select v-model="dialogLeftTop1_3_data.patient.educationalLevel" placeholder="请选择文化程度"
                     style='width: 196px' dict-code="whcd">
        </dict-select>
      </el-form-item>
      <el-form-item label="备用电话" prop="patient.backupTel">
        <el-input v-model="dialogLeftTop1_3_data.patient.backupTel" auto-complete="off"
                  placeholder="请输入备用电话"></el-input>
      </el-form-item>
      <el-form-item label="国籍" prop="patient.nationality">
        <dict-select v-model="dialogLeftTop1_3_data.patient.nationality" placeholder="请选择国籍" style='width: 196px' dict-code="nation">
        </dict-select>
      </el-form-item>
      <el-form-item label="民族" prop="patient.nation">
        <dict-select v-model="dialogLeftTop1_3_data.patient.nation" placeholder="请选择民族" style='width: 196px' dict-code="mingzu">
        </dict-select>
      </el-form-item>
      <br/>
      <el-form-item label="出生地" prop="patient.birthAreaId">
        <el-cascader
          placeholder="试试搜索：地名"
          :options="options"
          filterable
          change-on-select
          v-model="dialogLeftTop1_3_data.patient.birthAreaId"
          style='width: 196px;'></el-cascader>
      </el-form-item>
      <el-form-item label="居住地址" prop="patient.liveAreaId">
        <el-cascader
          placeholder="试试搜索：地名"
          :options="options"
          filterable
          change-on-select
          v-model="dialogLeftTop1_3_data.patient.liveAreaId"
        ></el-cascader>
        <el-input v-model="dialogLeftTop1_3_data.patient.liveStreet" auto-complete="off" placeholder="镇/街道"
                  style='width: 196px;'></el-input>
        <el-input v-model="dialogLeftTop1_3_data.patient.liveDetailAddr" auto-complete="off" placeholder="详细地址"
                  style='width: 196px;'></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="职业" prop="patient.occupation">
        <el-select v-model="dialogLeftTop1_3_data.patient.occupation" placeholder="请选择职业" style='width: 196px'>
          <el-option label="IT" value="1"></el-option>
          <el-option label="保姆" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位名称" prop="patient.companyName">
        <el-input v-model="dialogLeftTop1_3_data.patient.companyName" auto-complete="off"
                  placeholder="请输入单位名称"></el-input>
      </el-form-item>
      <el-form-item label="单位电话" prop="patient.companyTel">
        <el-input v-model="dialogLeftTop1_3_data.patient.companyTel" auto-complete="off"
                  placeholder="请输入单位电话"></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="单位地址" prop="patient.companyAreaId">
        <el-cascader
          placeholder="试试搜索：地名"
          :options="options"
          filterable
          change-on-select
          v-model="dialogLeftTop1_3_data.patient.companyAreaId"
          style='width: 196px;'></el-cascader>
        <el-input v-model="dialogLeftTop1_3_data.patient.companyStreet" auto-complete="off" placeholder="镇/街道"
                  style='width: 196px;'></el-input>
        <el-input v-model="dialogLeftTop1_3_data.patient.companyDetialAddr" auto-complete="off" placeholder="详细地址"
                  style='width: 196px;'></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="联系人" prop="patient.refName">
        <el-input v-model="dialogLeftTop1_3_data.patient.refName" auto-complete="off" placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="patient.refTel">
        <el-input v-model="dialogLeftTop1_3_data.patient.refTel" auto-complete="off" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="关系" prop="patient.refRelation">
        <el-select v-model="dialogLeftTop1_3_data.patient.refRelation" placeholder="请选择手术" style='width: 196px'>
          <el-option label="同事" value="0"></el-option>
          <el-option label="领导" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人地址" prop="patient.refAreaId">
        <el-cascader
          placeholder="试试搜索：地名"
          :options="options" :loading="loadingOptions"
          filterable
          change-on-select
          v-model="dialogLeftTop1_3_data.patient.refAreaId"
          style='width: 196px;'></el-cascader>
        <el-input v-model="dialogLeftTop1_3_data.patient.refStreet" auto-complete="off" placeholder="镇/街道"
                  style='width: 196px;'></el-input>
        <el-input v-model="dialogLeftTop1_3_data.patient.refDetialAddr" auto-complete="off" placeholder="详细地址"
                  style='width: 196px;'></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="麻醉医生" prop="anesthetistId">
        <el-select v-model="dialogLeftTop1_3_data.anesthetistId" filterable placeholder="请选择麻醉医生"
                   style='width: 196px' remote reserve-keyword :remote-method="getDoctor" :loading="loading">
          <el-option v-for='surgery in dialogLeftTop1_1_data_anesthesiaDoctorList' :label="surgery.name"
                     :value="surgery.id" :key='surgery.id'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="麻醉医生电话" prop="anesthetistTel">
        <el-input v-model="dialogLeftTop1_3_data.anesthetistTel" auto-complete="off"
                  placeholder="请输入备用电话"></el-input>
      </el-form-item>
      <el-form-item label="预约手术时间" prop="schedule">
        <el-date-picker type="date" placeholder="选择日期" v-model="dialogLeftTop1_3_data.schedule" style='width: 196px;'
                        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
  import _ from 'lodash'
  import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import DictSelect from '@/views/form/dictSelect'
  import { getDoctorList, getAreaList } from '@/api/common/common'

  export default {
    components: { DictSelect },
    data() {
      return {
        loading: false,
        loadingOptions: true,
        options: [],
        dialogLeftTop1_1_data_anesthesiaDoctorList: [],
        appointmentConfirmConst
      }
    },
    props: {
      dialogLeftTop1_3_data: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    mounted() {
      this.getDoctor(' ')
      this.getArea()
    },
    watch: {
      'dialogLeftTop1_3_data.anesthetistId': function() {
        try {
          this.dialogLeftTop1_3_data.anesthetistName = this.dialogLeftTop1_3_data.anesthetistId !== '' &&
        this.dialogLeftTop1_1_data_anesthesiaDoctorList.length > 0
            ? _.find(this.dialogLeftTop1_1_data_anesthesiaDoctorList, { id: this.dialogLeftTop1_3_data.anesthetistId }).name : ''
        } catch (e) {
          console.log(e)
        }
      },
      'dialogLeftTop1_3_data.patient.birthday': function() {
        try {
          if (!this.dialogLeftTop1_3_data.patient.birthday || this.dialogLeftTop1_3_data.patient.birthday === '') {
            this.dialogLeftTop1_3_data.patient.age = 0
          } else {
            this.dialogLeftTop1_3_data.patient.age = new Date((new Date() - new Date(this.dialogLeftTop1_3_data.patient.birthday))).getYear() - 70
          }
        } catch (e) {
          this.dialogLeftTop1_3_data.patient.age = 0
          console.log(e)
        }
      }
    },
    methods: {
      submit() {
        let validFlag = false
        this.$refs['dialogLeftTop1_3_data'].validate((valid) => {
          if (valid) {
            validFlag = true
          }
        })
        return validFlag
      },
      getDoctor(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            getDoctorList({ keyword: query.toLowerCase(), type: 1 }).then((res) => {
              this.loading = false
              this.dialogLeftTop1_1_data_anesthesiaDoctorList = res.data.list
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_anesthesiaDoctorList = []
        }
      },
      getArea() {
        getAreaList().then((res) => {
          this.options = res.data.list
          this.loadingOptions = false
        })
      }
    }
  }
</script>

